<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :interval="3000" :circular="true" :autoplay="true">

			<swiper-item v-for="(item , i) in list" :key="i">
				<navigator :url="'/skylub/good_detial/good_detial?goods_id=' + item.goods_id" class="swperitem">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航栏 -->
		<view class="navList">
			<view class="navitem" v-for="(item ,i ) in navList" :key="i" @click="tarbarNew(item.name)">
				<image :src="item.image_src"></image>
			</view>
		</view>
		<!-- 楼层的区域 -->
		<!-- 楼层区域 -->
		<view class="floor-list">
			<!-- 楼层 item 项 -->
			<view class="floor-item" v-for="(item, i) in floorList" :key="i">
				<!-- 楼层标题 -->
				<image :src="item.floor_title.image_src" class="floor-title"></image>
				<!-- 左右盒子的布局 -->
				<view class="floor-img-box">
					<navigator class="lift-img-box"
						:url="item.product_list[0].navigator_url.replace('/pages','/skylub/goods_list')">
						<image :src="item.product_list[0].image_src"
							:style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix">
						</image>
					</navigator>
					<view class="right-img-box">
						<navigator class="right-img-small" v-for="(item1,i1) in item.product_list " :key="i1" 
						:url="item1.navigator_url.replace('/pages','/skylub/goods_list')"">
							<template v-if="i1!==0">
								<image :src="item1.image_src" mode="widthFix" :style="{ width:item1.image_width+'rpx'}">
								</image>
							</template>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 抽奖的案例 -->
		<button @click="choujiang">
			点我抽奖
		</button>
	</view>
</template>

<script>
	import {
		getnavList,
		swpierdataList,
		getfloorList
	} from 'api/home.js'
	export default {
		data() {
			return {
				// 轮播图数据
				list: [],
				// 导航栏数据
				navList: [],
				// 楼层数据
				floorList: []
			}
		},
		// 相当于create
		onLoad() {
			this.swpierdataList()
			// 导航栏的
			this.getnavList()
			this.getfloorList()
		},
		methods: {
			
			// 获取轮播图
			async swpierdataList() {
				const res = await swpierdataList()
				// 
				this.list = res
			},
			choujiang(){
				uni.navigateTo({
					url:"/skylub/choujiang/choujiang"
				})
			},
			// 获取导航栏
			async getnavList() {
				const res = await getnavList()
				// 
				this.navList = res
			},
			// 分类的跳转
			tarbarNew(name) {
				if (name === '分类') {
					uni.switchTab({
						url: '/pages/cate/cate'
					})
				}
			},
			// 楼层的数据
			async getfloorList() {
				const res = await getfloorList()
				// 
				this.floorList = res
			},
			
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;

		.swperitem,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.navList {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		image {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.floor-title {
		height: 60rpx;
		width: 100%;
		display: flex;
	}

	.floor-img-box {
		display: flex;
		margin-left: 15rpx;

		.right-img-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;


		}
	}
</style>
